screenshot: Don't pick up rubberband style from GTK

Selecting a screen area for a screenshot isn't the same as selecting
items in an icon view, so there's no strong rationale for picking
up the style from GTK. We stopped doing that for other elements like
tile previews long ago, so just use our own style here too.

https://gitlab.gnome.org/GNOME/gnome-shell/merge_requests/481

diff --git a/data/theme/gnome-shell-sass/_common.scss b/data/theme/gnome-shell-sass/_common.scss
index c7485aefd8c1811f743096e82af9771bf6974561..835d44b55106163fae8bd8953e200f71b6c881c4 100644 (file)
--- a/data/theme/gnome-shell-sass/_common.scss
+++ b/data/theme/gnome-shell-sass/_common.scss
@@ -1142,6 +1142,12 @@ StScrollBar {
 
 .ripple-box:rtl { border-radius: 0 0 0 52px; } // just a simple change to the border radius position
 
+// Rubberband for select-area screenshots
+.select-area-rubberband {
+  background-color: transparentize($selected_bg_color,0.7);
+  border: 1px solid $selected_bg_color;
+}
+
 // not really top bar only
 .popup-menu-arrow { icon-size: 1.09em; }
 .popup-menu-icon { icon-size: 1.09em; }

diff --git a/js/ui/screenshot.js b/js/ui/screenshot.js
index 9261535142af87b24cd599ec42aca5f2e6bafea9..c6896ff9b9e49b7e04ad836aabe6439ae981617b 100644 (file)
--- a/js/ui/screenshot.js
+++ b/js/ui/screenshot.js
@@ -1,6 +1,6 @@
 // -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
 
-const { Clutter, Gio, GLib, Gtk, Meta, Shell, St } = imports.gi;
+const { Clutter, Gio, GLib, Meta, Shell, St } = imports.gi;
 const Signals = imports.signals;
 
 const GrabHelper = imports.ui.grabHelper;
@@ -227,8 +227,6 @@ var SelectArea = class {
         this._lastY = 0;
         this._result = null;
 
-        this._initRubberbandColors();
-
         this._group = new St.Widget({ visible: false,
                                       reactive: true,
                                       x: 0,
@@ -248,10 +246,10 @@ var SelectArea = class {
                                                       coordinate: Clutter.BindCoordinate.ALL });
         this._group.add_constraint(constraint);
 
-        this._rubberband = new Clutter.Rectangle({ color: this._background,
-                                                   has_border: true,
-                                                   border_width: 1,
-                                                   border_color: this._border });
+        this._rubberband = new St.Widget({
+            style_class: 'select-area-rubberband',
+            visible: false
+        });
         this._group.add_actor(this._rubberband);
     }
 
@@ -265,25 +263,6 @@ var SelectArea = class {
         this._group.visible = true;
     }
 
-    _initRubberbandColors() {
-        function colorFromRGBA(rgba) {
-            return new Clutter.Color({ red: rgba.red * 255,
-                                       green: rgba.green * 255,
-                                       blue: rgba.blue * 255,
-                                       alpha: rgba.alpha * 255 });
-        }
-
-        let path = new Gtk.WidgetPath();
-        path.append_type(Gtk.IconView);
-
-        let context = new Gtk.StyleContext();
-        context.set_path(path);
-        context.add_class('rubberband');
-
-        this._background = colorFromRGBA(context.get_background_color(Gtk.StateFlags.NORMAL));
-        this._border = colorFromRGBA(context.get_border_color(Gtk.StateFlags.NORMAL));
-    }
-
     _getGeometry() {
         return { x: Math.min(this._startX, this._lastX),
                  y: Math.min(this._startY, this._lastY),
@@ -302,6 +281,7 @@ var SelectArea = class {
 
         this._rubberband.set_position(geometry.x, geometry.y);
         this._rubberband.set_size(geometry.width, geometry.height);
+        this._rubberband.show();
 
         return Clutter.EVENT_PROPAGATE;
     }